import React, {Component} from 'react'
import { withRouter} from 'react-router-dom'
import './index.scss'
class Item extends Component {
    render() {
        let {data} = this.props
        return (
            <div>
                <span>{data.status === 1 ? '进行中' : (data.status === 2 ? '强行终止' : '已完成')}</span>
                <span onClick={_ => this.props.history.push('/todo/detail', {data: data})}>{data.content}</span>
                {
                    data.status === 1 ? <div>
                        <button onClick={_=>this.props.changeStatus(data.id, 2)}>强行终止</button>
                        <button onClick={_=>this.props.changeStatus(data.id, 3)}>完成</button>
                    </div>:null
                }
            </div>
        )
    }
}
Item = withRouter(Item)
export default class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            addVal: '',
            list: [
                {
                    id: 1,
                    content: '客户经理掌上宝测试',
                    status: 1 // 1：进行中，2：强行终止，3：已完成
                },
                {
                    id: 2,
                    content: '掌上宝测试',
                    status: 2 // 1：进行中，2：强行终止，3：已完成
                }
            ],
            filterStatus: 0,
            filterText: '' // 模糊
        }
    }
    addTodo() {
        let {list} = this.state
        list.push({
            id: list.length + 1,
            content: this.state.addVal,
            status: 1
        })
        this.setState({
            list
        })
    }
    changeStatus(id, status) {
        // 根据id查找数据
        // 查找到以后，修改数据的status状态
        let { list } = this.state
        list = list.map((item) => {
            if(item.id === id) {
                item.status = status
            }
            return item
        })
        this.setState({
            list
        })
    }
    render() {
        return(
            <div>
                <div className="header">
                    <div className="left">
                        <span>任务发放</span>
                        <button style={{color: this.state.filterStatus === 0 ? 'red' : 'black'}} onClick={_ => this.setState({
                            filterStatus: 0
                        })}>全部任务</button>
                        <button style={{color: this.state.filterStatus === 1? 'red' : 'black'}} onClick={_ => this.setState({
                            filterStatus: 1
                        })}>进行中的任务</button>
                        <button style={{color: this.state.filterStatus === 2 ? 'red' : 'black'}} onClick={_ => this.setState({
                            filterStatus: 2
                        })}>强行终止的任务</button>
                        <button style={{color: this.state.filterStatus === 3 ? 'red' : 'black'}} onClick={_ => this.setState({
                            filterStatus: 3
                        })}>已完成的任务</button>
                    </div>
                    <div className="right">
                        <input value={this.state.filterText} onChange={e => this.setState({
                            filterText: e.target.value
                        })} />
                    </div>
                </div>
                <div className="add-box">
                    <input value={this.state.addVal} onChange={e => this.setState({
                        addVal: e.target.value
                    })}></input>
                    <button onClick={_ => this.addTodo()}>添加</button>
                </div>
                {
                    this.state.list.filter(item => {
                        if(this.state.filterStatus === 0) {
                            // 全部
                            return item.content.includes(this.state.filterText)
                        } else {
                            return item.status === this.state.filterStatus && item.content.includes(this.state.filterText)
                        }
                    }).map((item, key) => <Item key={key} data={item} changeStatus={(id, status) => this.changeStatus(id, status)}></Item>)
                }
            </div>

        )
    }
}